﻿<html>
<head>
    <title>路灯控制系统</title>
    @*--------------------应用easyUI的CSS文件---------------------*@
    <link href="~/Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />

    <script src="~/Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    @*---------------------应用easyUI的的JS文件-----------------*@
 

    <script type="text/javascript">

       $(function () {
           //////绑定前台菜单栏
           ////BindMenuDataGroupType();

            //绑定菜单单击事件
            BindMenuClickHrefEvent();

            //读取动态时间的变化
            ReadDateTimeShow();

            //这里实现对时间动态的变化
            var setTimeInterval = setInterval(ReadDateTimeShow, 1000);

            //实现Tab布局
            $("#tabs").tabs({});

            //绑定tabs的右键菜单
            $("#tabs").tabs({
                onContextMenu: function (e, title) {
                    e.preventDefault();
                    $('#tabsMenu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            });

            //实例化menu的onClick事件
            $("#tabsMenu").menu({
                onClick: function (item) {
                    CloseTab(this, item.name);
                }
            });

            //几个关闭事件的实现
            function CloseTab(menu, type) {
                var curTabTitle = $(menu).data("tabTitle");
                var tabs = $("#tabs");

                if (type === "close") {
                    tabs.tabs("close", curTabTitle);
                    return;
                }

                var allTabs = tabs.tabs("tabs");
                var closeTabsTitle = [];

                $.each(allTabs, function () {
                    var opt = $(this).panel("options");
                    if (opt.closable && opt.title != curTabTitle && type === "Other") {
                        closeTabsTitle.push(opt.title);
                    } else if (opt.closable && type === "All") {
                        closeTabsTitle.push(opt.title);
                    }
                });

                for (var i = 0; i < closeTabsTitle.length; i++) {
                    tabs.tabs("close", closeTabsTitle[i]);
                }
            }

        });




        //实现用户单击导航栏跳转页面的方法
        function BindMenuClickHrefEvent() {
            $(".menuLink").click(function () {
                //获取按钮里面的Src属性
                var src = $(this).attr("src");
                //将主框架的iframe跳转到菜单指向的地址，$("#frmWorkArea").attr("src", src);
               //Tab页面添加页面标签，每当单击左边的导航栏的时候跳转
                var titleShow = $(this).text();
                var strHtml = '<iframe id="frmWorkArea" width="100%" height="100%" frameborder="0" scrolling="yes" src="' + src + '"></iframe>';
                //判断Tab标签中是否有相同的数据标签
                var isExist = $("#tabs").tabs('exists', titleShow);
                if (!isExist) {
                    $("#tabs").tabs('add', {
                        title: titleShow,
                        content: strHtml,
                        iconCls: 'icon-save',
                        closable: true,
                    });
                }
                else {
                    $('#aa').tabs('select', titleShow);
                }
            });
        }

        //读取动态时间的变化
        function ReadDateTimeShow() {
            var year = new Date().getFullYear();
            var Month = new Date().getMonth() + 1;
            var Day = new Date().getDate();
            var Time = new Date().toLocaleTimeString();
            var AddDate = year + "年" + Month + "月" + Day + "日,时间:" + Time;
            $("#date").text(AddDate);
        }


    </script>

</head>
<body class="easyui-layout">

    <div id="tabsMenu" class="easyui-menu" style="width:120px;">
        <div name="close">关闭</div>
        <div name="Other">关闭其他</div>
        <div name="All">关闭所有</div>
    </div>  

    @*-----------------------------------网站头部--开始-------------------------------------*@
    <div data-options="region:'north',border:false" style="height: 60px; background-image: url(../../images/3.jpg); background-repeat: repeat-x;">
        <img src="" />
        <div style="float: right; padding-top: 5px; width: 750px; font-size: 18px">

            <div style="float: left; padding-right:30px; font-size: 18px; padding-top: 6px;">
               路灯控制系统
            </div>

            <div style="float: right; padding-right:30px; font-size: 14px; padding-top: 6px;">
                当前时间：<b id="date"></b> &nbsp;&nbsp; <a href="/Login/Index"><b>注销</b></a>
            </div>

        </div>

    </div>
    @*-----------------------------------网站头部--结束-------------------------------------*@


    @*------------------------------------网站左边导航栏 开始-------------------------------------------------*@
    <div data-options="region:'west',split:true,title:'菜单导航'" style="width: 180px;">
        <div id="aa" class="easyui-accordion" style="text-align: left;">
      @*-------------菜单项-----------*@
            <div title="用户管理" data-options="iconCls:'icon-ok'" selected="true" style="overflow: auto; padding: 10px;">
                   <p><a href="javascript:void(0)" src="/UserInfo/Index" class="menuLink" style="padding:20px">用户管理</a></p>
                   <p><a href="javascript:void(0)" src="/Role/Index" class="menuLink" style="padding:20px">角色管理</a></p>
                   <p><a href="javascript:void(0)" src="/ActionInfo/Index" class="menuLink" style="padding:20px">权限管理</a></p>

            </div>

            <div title="地图展示" data-options="iconCls:'icon-ok'" selected="true" style="overflow: auto; padding: 10px;">
               <p><a href="javascript:void(0)" src="/Light/Index" class="menuLink" style="padding:20px">标注路灯</a></p>
            </div>
           
            

            <div title="设备管理" data-options="iconCls:'icon-ok'" selected="true" style="overflow: auto; padding: 10px;">
                
                <p><a href="javascript:void(0)" src="/DeviceManagement/Index" class="menuLink" style="padding:20px">设备信息管理</a></p>
                
                <p><a href="javascript:void(0)" src="/Light/LightInfoShow" class="menuLink" style="padding:20px">路灯信息管理</a></p>
                
                <p><a href="javascript:void(0)" src="/Collector/Index" class="menuLink" style="padding:20px">采集器信息管理</a></p>
                
                <p><a href="javascript:void(0)" src="/DeviceType/Index" class="menuLink" style="padding:20px">控制器类型管理</a></p>
                
                <p><a href="javascript:void(0)" src="/LampController/Index" class="menuLink" style="padding:20px">控制器信息管理</a></p>
                
            </div>

        </div>
    </div>
    @*---------------------------------------网站左边导航栏 开始--------------------------------------------*@


    @*-------------------------------------网站工作区域  开始------------------------------------------------*@
    <div data-options="region:'center'">
        @*Tab容器的使用*@
        <div id="tabs" class="easyui-tabs" data-options="tools:'#tab-tools'" fit="true">
        </div>
    </div>
    @*--------------------------------------网站工作区域  结束-----------------------------------------------*@


    @*---------------------------------网站底部 开始----------------------------------------------------*@
    <div data-options="region:'south',border:false" style="height: 20px; background: #A9FACD; text-align: center;">
        版权所有  @@copy 2015 杭州策望科技有限公司
    </div>
    @*-------------------------------------网站底部  结束------------------------------------------------*@

</body>
</html>
